frontend/libs/studio-components/src/components/StudioSearch/StudioSearch.tsx (1)

13-22: Consider adding aria-label when no visible label is present.

While the implementation looks good, consider adding an aria-label when showLabel is false to maintain accessibility.

 return (
   <div>
     {showLabel && (
       <Label htmlFor={searchId} spacing>
         {label}
       </Label>
     )}
-    <Search {...rest} id={searchId} size={size} ref={ref} />
+    <Search 
+      {...rest} 
+      id={searchId} 
+      size={size} 
+      ref={ref}
+      aria-label={!showLabel && label ? label : undefined}
+    />
   </div>
 );

frontend/libs/studio-components/src/components/StudioSearch/StudioSearch.test.tsx (1)

22-27: Add test for aria-label when no visible label is present.

To ensure accessibility is maintained, add a test case for the aria-label when showLabel is false.

+ it('should have aria-label when visible label is not shown', () => {
+   const label = 'Search for something';
+   renderTestSearch({ label, showLabel: false });
+   const search = screen.getByRole('searchbox', { name: label });
+   expect(search).toHaveAttribute('aria-label', label);
+ });

frontend/testing/playwright/pages/DashboardPage.ts (1)

96-96: Consider adding a name to the searchbox role selector.

While using getByRole('searchbox') follows accessibility best practices, adding the expected label text would make the test more specific and robust.

-    await this.page.getByRole('searchbox').fill(word);
+    await this.page.getByRole('searchbox', { name: this.textMock('dashboard.search') }).fill(word);

frontend/dashboard/pages/Dashboard/Dashboard.module.css (1)

6-7: Consider enhancing responsive layout

While the grid layout works, consider these improvements for better responsiveness:

• Add media queries for narrow viewports
• Define minimum column widths
• Consider fallback for older browsers

Example improvement:

 .topBar {
   display: grid;
-  grid-template-columns: auto auto;
+  grid-template-columns: minmax(200px, 1fr) minmax(auto, max-content);
   justify-content: space-between;
   align-items: center;
   margin-bottom: var(--fds-spacing-10);
+  gap: var(--fds-spacing-4);
+  @media (max-width: 768px) {
+    grid-template-columns: 1fr;
+    gap: var(--fds-spacing-6);
+  }
 }

Also applies to: 55-55

frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeListPage/CodeListsActionsBar/CodeListsActionsBar.tsx (1)

38-41: 💡 Codebase verification

Missing required controlled component props

The StudioSearch component requires controlled component implementation as evidenced by other usages in the codebase (e.g., in TextEditor.tsx and Dashboard.tsx). The current implementation should include:

• value prop for controlled state
• onChange handler for input changes

🔗 Analysis chain

Missing search functionality props.

The StudioSearch component appears to be missing essential props for search functionality:

• onChange handler for search input
• value prop for controlled input
• placeholder for better UX when label is visible

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Check if search functionality is implemented elsewhere
rg -A 5 "StudioSearch.*onChange" .

Length of output: 36

---

Script:

#!/bin/bash
# Find StudioSearch component definition
fd StudioSearch

Length of output: 237

---

Script:

#!/bin/bash
# Look for any StudioSearch usage patterns
rg "StudioSearch" -A 3

Length of output: 6543

---

Script:

#!/bin/bash
# Find component imports
rg "import.*StudioSearch"

Length of output: 711

frontend/libs/studio-components/src/components/StudioSearch/StudioSearch.tsx (1)

14-14: Consider enhancing className handling.

The className prop is directly passed to the wrapper div. Consider using a utility like clsx or classnames to combine multiple class names and ensure robust handling of undefined or null values.

-      <div className={className}>
+      <div className={clsx(className)}>

Don't forget to add the import:

import clsx from 'clsx';

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro